
// 验证是否登录
checkLogin()

// 显示用户名
showUserName()

// 账号退出
// 给退出按钮注册点击事件
document.querySelector('#logout').addEventListener('click', () => {
    // 提示用户退出成功
    showToast('退出成功')
    logout()
})

// 获取学生数据
function getStudentData() {
    axios.get('/students').then(res => {
        // console.log(res);
        const data = res.data
        // 渲染页面
        document.querySelector('.list').innerHTML = data.map((item, index) => {
            let gender = ''
            if (item.gender === 0) {
                gender = '男'
            }
            else {
                gender = '女'
            }
            return `
            <tr data-id="${item.id}">
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${gender}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province}${item.city}${item.area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>
            `
        }).join('')

        // 学生总数
        const total = data.length
        document.querySelector('.total').innerHTML = total

    })
}

// 一进来就渲染一次
getStudentData()

// 展示修改栏
const myModal = new bootstrap.Modal(document.querySelector('#modal'))
// myModal.show()

// 渲染省份、市、区数据
const pSelect = document.querySelector(`select[name='province']`)
const cSelect = document.querySelector(`select[name='city']`)
const aSelect = document.querySelector(`select[name='area']`)
async function getAddressData() {
    const res1 = await axios.get('/api/province')
    // console.log(res1);
    const provinceList = res1.list
    pSelect.innerHTML += provinceList.map(item => `<option value="${item}">--${item}--</option>`).join('')

    // 选中省份，渲染市
    pSelect.addEventListener('change', async () => {
        // console.log(e.target.value);
        // 删除市和区数据
        cSelect.innerHTML = '<option value="">--城市--</option>'
        aSelect.innerHTML = '<option value="">--地区--</option>'
        const res2 = await axios.get(`/api/city`,{
            params: {
                pname: pSelect.value
            }
        })
        // console.log(res2);
        const cityList = res2.list
        cSelect.innerHTML += cityList.map(item => `<option value="${item}">${item}</option>`).join('')}
    )
    // 选中市，渲染区
    cSelect.addEventListener('change', async () => {
        aSelect.innerHTML += '<option value="">--地区--</option>'
        const res3 = await axios.get(`/api/area`, {
            params: {
                pname: pSelect.value,
                cname: cSelect.value
            }
        })
        const areaList = res3.list
        aSelect.innerHTML = areaList.map(item => `<option value="${item}">${item}</option>`).join('')
    })
}
getAddressData()


// 给学生列表注册事件委托
// 删除学生数据+弹出修改学生数据栏
document.querySelector('.list').addEventListener('click', e => {
    const id = e.target.parentNode.parentNode.parentNode.dataset.id
    if (e.target.classList.contains('bi-pen')) {
        // 标题改成修改数据
        document.querySelector('.modal-title').innerHTML = '修改学生数据'
        // 渲染学生数据
        axios.get(`/students/${id}`).then(res => {
            console.log(res);
            const data = res.data
            // 回显内容功能
            const { name, age, gender, group, hope_salary, salary} = data
            const realData = { name, age, gender, group, hope_salary, salary}
            Object.keys(realData).forEach(key => {
                // 如果key是gender，需要特殊处理
                if (key === 'gender') {
                    if (realData[key] === 1) {
                        document.querySelector(`input[value='1']`).checked = true
                    }
                    else {
                        document.querySelector(`input[value='0']`).checked = true
                    }
                }
                else {
                    document.querySelector(`input[name='${key}']`).value = realData[key]
                }
            })
            // 渲染地址数据，需要单独处理，select的change事件，不会因为option的值改变而触发，只能由用户手动输入并改变option的值时触发
            const { province, city, area } = data
            pSelect.value = province
            // 获取市数据
            axios.get(`/api/city`, {
                params: {
                    pname: province
                }
            }).then(res => {
                const cityList = res.list
                cSelect.innerHTML += cityList.map(item => `<option value="${item}">${item}</option>`).join('')
                // 选中对应城市项
                cSelect.value = city
            })
            // 获取区数据
            axios.get(`/api/area`, {
                params: {
                    pname: province,
                    cname: city
                }
            }).then(res => {
                const areaList = res.list
                aSelect.innerHTML += areaList.map(item => `<option value="${item}">${item}</option>`).join('')
                aSelect.value = area
            })
            
        })
        // 给form添加id
        document.querySelector('#form').dataset.id = id
        // 点击修改按钮，弹出修改栏弹框
        myModal.show()
    }
    else if (e.target.classList.contains('bi-trash')) {
        // console.log(id);
        // 提示是否需要删除，如果点击是，就删除
        if (confirm('是否删除该学生')) {
            axios.delete(`/students/${id}`).then(res => {
                // 删除成功，提示用户，刷新页面
                showToast('删除成功')
                getStudentData()
            })
        }
    }
})

// 点击修改栏中的确定按钮，进行非空判断，提交数据，重新渲染页面
document.querySelector('#submit').addEventListener('click', () => {
    const form = document.querySelector('#form')
    const formData = serialize(form, { hash: true, empty: true })
    // 将formData中的gender,age,group,hope_salary,salary转换为数字类型
    formData.gender = +formData.gender
    formData.age = +formData.age
    formData.group = +formData.group
    formData.hope_salary = +formData.hope_salary
    formData.salary = +formData.salary
    console.log(formData);
    if (formData.name && formData.age && formData.gender !== '' && formData.group && formData.hope_salary && formData.salary && formData.province && formData.city && formData.area) {
        if (form.dataset.id) {
            // 提交数据
            axios.put(`/students/${form.dataset.id}`, formData).then(res => {
                console.log(res);
                
                // 重新渲染页面
                getStudentData()
                // 关闭弹窗
                myModal.hide()
                // 提交成功，提示用户，刷新页面
                showToast('修改成功')
                
            })
        }
        else {
            // 发送请求
            axios.post('/students',formData).then(res => {
                // 重新渲染页面
                getStudentData()
                // 关闭弹窗
                myModal.hide()
                showToast('新增成功')
            })
        }
    }
    else {
        showToast('请填写完整')
    }
})

// 新增学生数据功能
document.querySelector('#openModal').addEventListener('click', () => {
    // 打开新增学生弹框
    myModal.show()
    // 修改标题
    document.querySelector('.modal-title').innerHTML = '新增学生'
    // 清空表单
    document.querySelector('#form').reset()
    
})

